<template>
  <view class="container">
    <view class="head">
      <video :src="videoUrl" :controls="false"></video>
      <image src="/static/deatils/fenxiang.png" class="image_4"></image>
      <!-- <image src="/static/deatils/play.png" class="image_5"></image> -->
    </view>
    <view class="main">
      <view class="des">
        <text class="des_title">雅思高分第一课</text>
        <text
          class="des_des ellipsis2">雅思高分第一课雅思高分第一课雅思高分第一课雅思高分第一课雅思高分第一课雅思高分第一课雅思雅思高分第一课雅思雅思高分第一课雅思雅思高分第一课雅思雅思高分第一课雅思雅思高</text>
        <view class="des_footer">
          <text class="text_3">2020.09.26</text>
          <text class="text_4">50人观看</text>
        </view>
      </view>
      <view class="coupon">
        <view class="coupon_left">
          <image src="/static/deatils/couponlin.png" mode=""></image>
          满200减20 满99减10
        </view>
        <view class="coupon_right flex-center">点击领券</view>
      </view>
      <uv-tabs :list="swiperList" v-model:current="currentIndex"
        :activeStyle="{ color: '#218CFE', 'font-size': '32rpx', 'font-weight': 'bold' }" :lineHeight="4.5"
        :line-width="14" :lineColor="`url('/static/deatils/tabs_bottom.png') 100% 100%`"
        @change="tabsHandler"></uv-tabs>
      <swiper :list="swiperList" v-model:current="currentIndex" circular :autoplay="false" class="swiper_box">
        <swiper-item v-for="(item,index) in swiperList" :key="index">
          <scroll-view scroll-y="true" class="scroll_main">
            <view v-if="currentIndex == 0" class="scroll_main_box" v-for="(item,index) in list" :key="index">
              <image :src="item.img"></image>
              <text class="ellipsis2">{{item.des}}</text>
            </view>
            <template v-else-if="currentIndex == 1">
              <view class="scroll_main_evaluate" v-for="(item,index) in evaluateList" :key="index">
                <image :src="item.avatar" mode=""></image>
                <view class="evaluate_r">
                  <view class="evaluate_r_head">{{item.name}}</view>
                  <view class="evaluate_r_des">
                    {{item.pinlun}}
                  </view>
                  <view class="evaluate_r_f">
                    <view class="evaluate_r_f_l">
                      <text>
                        2020-09-10
                      </text>
                      <view>删除</view>
                    </view>
                    <view class="evaluate_r_f_r">
                      <uv-icon v-if="item.like" name="heart" size="48rpx"></uv-icon>
                      <uv-icon v-else name="heart-fill" color="#fa4058" size="48rpx"></uv-icon>
                      <image src="/static/deatils/huifu.png" mode=""></image>
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="guesslive_main">
                <view class="guesslive_main_box" v-for="(item,index) in guessliveList" :key="index">
                  <view class="guesslive_main_box_left">
                    <image :src="item.image" mode=""></image>
                    <view>
                      <image
                        :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
                        mode=""></image>
                      <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
                    </view>
                  </view>
                  <view class="guesslive_main_box_content">
                    <view class="guesslive_content_head ellipsis">
                      <view>
                        {{item.title}}
                      </view>
                      <text class="guesslive_content_des"> {{item.des}}</text>
                    </view>
                    <view class="guesslive_content_footer">
                      <view class="guesslive_footer_left">{{item.read || 0}}人已看过</view>
                      <view class="guesslive_footer_right">
                        <text>￥{{item.o_price}}</text>
                        <view><text>￥</text>{{item.price}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
          </scroll-view>
        </swiper-item>
      </swiper>
      <view class="vip_controls" v-if="currentIndex == 0">
        <view class="scroll_footer">
          <view class="scroll_footer_main">
            <image src="/static/deatils/suo.png" mode=""></image>
            请付费查看详细信息
            <uv-icon name="arrow-right" color="#218CFE"></uv-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="footer_fixed">
      <view class="footer_left">
        <image src="/static/deatils/songpengyou.png" mode=""></image>
        <text>送好友</text>
      </view>
      <view class="footer_right" @tap="gotoUrl">
        <view class="footer_right_zuo">
          订阅专栏
        </view>
        <view class="footer_right_you">
          <view>
            <text>￥</text>
            <view>19.9</view>
          </view>
          <text>￥99.99</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app'
  const info = ref({

  })
  const swiperList = ref([
    { name: '详情' },
    { name: '评价' },
    { name: '相关推荐' },
  ])
  const currentIndex = ref(0)
  const videoUrl = ref('https://cdn.uviewui.com/uview/resources/video.mp4')
  const tabsHandler = (e : any) => {
    console.log(e)
    currentIndex.value = e.index
  }
  const list = ref([])
  const evaluateList = ref([
    {
      avatar: '/static/my/avatar.jpg',
      name: '会说话的星星',
      pinlun: '陕西省西安市高新区科技路光远路交叉口往北5 0米新世大厦6楼1101室',
      time: '2020-09-10',
      like: 0,
    },
    {
      avatar: '/static/my/avatar.jpg',
      name: '会说话的星星',
      pinlun: '陕西省西安市高新区科技路光远路交叉口往北5 0米新世大厦6楼1101室',
      time: '2020-09-10',
      like: 1,
    },
    {
      avatar: '/static/my/avatar.jpg',
      name: '会说话的星星',
      pinlun: '陕西省西安市高新区科技路光远路交叉口往北5 0米新世大厦6楼1101室',
      time: '2020-09-10',
      like: 1,
    }

  ])
  const data = [
    {
      img: '/static/taotaitupian/uitexun.png',
      des: '组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界组件化界面设计组件'
    }, {
      img: '/static/taotaitupian/uitexun.png',
      des: '组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界组件化界面设计组件'
    }, {
      img: '/static/taotaitupian/uitexun.png',
      des: '组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界组件化界面设计组件'
    }, {
      img: '/static/taotaitupian/uitexun.png',
      des: '组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界面设计组件化界组件化界面设计组件'
    }
  ]
  const guessliveList = ref([
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    },
  ])
  const gotoUrl = () => {
    uni.navigateTo({
      url: '/pages/order/order'
    })
  }
  onLoad((o) => {
    console.log(o)
    list.value.push(...data)
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;

    :deep(.uv-tabs__wrapper__nav__line) {
      bottom: 12rpx;
    }

    :deep(.uv-tabs) {
      position: sticky;
      top: 0;
      padding: 0 8rpx;
      z-index: 9;
      background-color: #fff;
      box-sizing: border-box;
    }

    .coupon {
      width: 690rpx;
      height: 80rpx;
      background: #FFF7E9;
      border-radius: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      padding: 0 20rpx;
      margin: 50rpx 30rpx 20rpx;
      box-sizing: border-box;

      &_left {
        display: flex;
        align-items: center;

        image {
          width: 39rpx;
          height: 32rpx;
          margin-right: 30rpx;
        }

        font-size: 28rpx;
        color: #333333;
      }

      &_right {
        width: 153rpx;
        height: 54rpx;
        background: linear-gradient(180deg, #FF973A 0%, #FF6A3C 100%);
        border-radius: 27rpx;
        font-size: 28rpx;
        color: #FFFFFF;

        &:active {
          color: #FF6A3C;
        }
      }
    }

    .main {
      height: calc(100% - 420rpx);
      overflow: auto;
      position: relative;
    }

    .swiper_box {
      height: 100%;
      padding: 20rpx 0 50rpx;
    }

    .scroll_main {
      width: 750rpx;
      height: 100%;

      &_box {
        width: 750rpx;
        box-sizing: border-box;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 30rpx;

        >image {
          width: 690rpx;
          height: 395rpx;
          margin-bottom: 30rpx;
        }
      }

      &_evaluate {
        display: flex;
        border-bottom: 1px solid rgba(#000, .1);
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;

        >image {
          width: 68rpx;
          height: 68rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .evaluate_r {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding-top: 18rpx;
          box-sizing: border-box;

          &_head {
            font-size: 24rpx;
            color: #666666;
          }

          &_des {
            font-size: 28rpx;
            color: #333333;
            margin: 30rpx 0;
          }

          &_f {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &_l {
              display: flex;
              align-items: center;
              font-size: 24rpx;
              color: #999999;

              view {
                color: #3A84C3;
                margin-left: 20rpx;
              }
            }

            &_r {
              display: flex;
              align-items: center;

              image {
                width: 40rpx;
                height: 40rpx;
                margin-left: 15rpx;
              }
            }
          }
        }
      }
    }

    .footer_fixed {
      display: flex;
      background-color: #fff;
      align-items: center;
    }

    .footer_left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      white-space: nowrap;
      color: #666666;

      image {
        width: 34rpx;
        height: 31rpx;
        margin-bottom: 5rpx;
      }

      text {
        white-space: nowrap;
      }
    }

    .vip_controls {
      height: calc(100% - 520rpx);
      position: fixed;
      bottom: 100rpx;
      left: 0;
      display: flex;
      align-items: flex-end;


      .scroll_footer {
        width: 750rpx;
        height: 329rpx;
        background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #218CFE;
        padding-bottom: 60rpx;
        box-sizing: border-box;

        image {
          width: 48rpx;
          height: 48rpx;
        }

        &_main {
          display: flex;
          align-items: center;
        }
      }
    }


    .footer_right {
      margin-left: 40rpx;
      width: 580rpx;
      height: 68rpx;
      background: #218CFE;
      border-radius: 34rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      &_zuo {
        margin-right: 50rpx;
      }

      &_you {
        display: flex;
        align-items: center;
        font-size: 28rpx;

        >view {
          display: flex;
          font-size: 24rpx;
          align-items: flex-end;
          margin-right: 12rpx;

          view {
            font-size: 32rpx;
          }
        }

        >text {
          font-size: 24rpx;
          color: #FFFFFF;
          text-decoration-line: line-through;
        }
      }
    }
  }

  .head {
    display: flex;
    align-items: center;
    position: relative;
    width: 750rpx;
    height: 420rpx;

    video {
      height: 100%;
      width: 100%;
    }

    .image_4 {
      width: 55rpx;
      height: 53rpx;
      border-radius: 27rpx;
      position: absolute;
      top: 20rpx;
      right: 30rpx;
    }

    .image_5 {
      width: 88rpx;
      height: 88rpx;
      background: #FFFFFF;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }

  .des {
    display: flex;
    flex-direction: column;
    padding: 50rpx 30rpx 0;

    &_title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }

    &_des {
      font-size: 28rpx;
      color: #666666;
      margin: 20rpx 0 30rpx;
    }

    &_footer {
      font-size: 24rpx;
      color: #999999;

      .text_3 {
        margin-right: 30rpx;
      }
    }
  }

  .guesslive_main {
    padding: 0 30rpx;
    box-sizing: border-box;

    &_box {
      border-bottom: 1px solid rgba(#000, .1);
      padding-bottom: 40rpx;
      margin-bottom: 40rpx;
      display: flex;
      justify-content: space-between;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;

      &:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      &_left {
        position: relative;
        margin-right: 20rpx;
        border-radius: 8rpx;
        width: 240rpx;
        height: 160rpx;

        image {
          width: 240rpx;
          height: 160rpx;
          border-radius: 8rpx;
        }

        >view {
          position: absolute;
          bottom: 0;
          left: 0;
          background: #343434;
          border-radius: 0rpx 10rpx 0rpx 10rpx;
          opacity: 0.6;
          color: #fff;
          font-size: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 90rpx;
          height: 36rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 2rpx;
          }
        }
      }

      &_content {
        width: 430rpx;
        height: 160rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .lesson_content_head,
        .guesslive_content_head {
          width: 100%;
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
        }

        .lesson_content_des,
        .guesslive_content_des {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          margin-top: 18rpx;
        }

        .lesson_content_footer,
        .guesslive_content_footer {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .lesson_footer_left,
          .guesslive_footer_left {
            font-size: 24rpx;
            color: #999999;
          }

          .lesson_footer_right,
          .guesslive_footer_right {
            display: flex;
            align-items: flex-end;

            >text {
              font-size: 24rpx;
              color: #999999;
              text-decoration-line: line-through;
              margin-right: 13rpx;
            }

            >view {
              font-weight: bold;
              font-size: 32rpx;
              color: #FA4058;

              text {
                font-size: 24rpx;
              }
            }
          }
        }
      }
    }
  }
</style>